<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a="http://richfaces.org/a4j"
	template="/layout/template-base.xhtml" contentType="text/html"
	markupType="xhtml">

	<ui:define name="content">
		
		<ui:include src="/user.xhtml" />
		
		<h:form>
			<s:decorate template="/layout/content.xhtml">
				<a:outputPanel>
					<h:outputText value="#{messages['members.bands.table.title']}"
						styleClass="title color-green" />
					<rich:panel styleClass="panel border-color-green">
						<rich:dataTable columnClasses="data-table-cell" id="bandsTable"
							value="#{componentesAction.grupos}" styleClass="data-table"
							var="item" rows="7">
							<rich:column filterBy="#{item.nombre}">
								<f:facet name="header">
									<h:outputText value="#{messages['members.bands.table.name']}" />
								</f:facet>
								<h:outputText value="#{item.nombre}" />
							</rich:column>
							<rich:column filterBy="#{item.tendencia}">
								<f:facet name="header">
									<h:outputText value="#{messages['members.bands.table.style']}" />
								</f:facet>
								<h:outputText value="#{item.tendencia}" />
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="#{messages['members.bands.table.registration.date']}" />
								</f:facet>
								<h:outputText value="#{item.alta}">
									<s:convertDateTime pattern="dd/MM/yyyy" />
								</h:outputText>
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="#{messages['members.bands.table.actions']}" />
								</f:facet>
								<a:commandLink action="#{componentesAction.mostrarComponentes()}" styleClass="no-border" reRender="base"
									rendered="#{(usuario.perfil.administrador or usuario.perfil.componentesModificar) and not componentesAction.verComponentes and not componentesAction.asignarComponentes}">
									<h:graphicImage value="/img/icons/16/edit-find.png" alt="#{messages['members.actions.edit']}" title="#{messages['members.actions.edit']}" />
									<f:setPropertyActionListener target="#{componentesAction.grupo}" value="#{item}" />
								</a:commandLink>
								<rich:spacer />
								<rich:spacer />
								<rich:spacer />
								<rich:spacer />
								<a:commandLink action="#{componentesAction.listarUsuarios()}" styleClass="no-border" reRender="base"
									rendered="#{(usuario.perfil.administrador or usuario.perfil.componentesCrear) and not componentesAction.verComponentes and not componentesAction.asignarComponentes}">
									<h:graphicImage value="/img/icons/16/zoom-in.png" alt="#{messages['members.actions.new']}" title="#{messages['members.actions.new']}" />
									<f:setPropertyActionListener target="#{componentesAction.grupo}" value="#{item}" />
								</a:commandLink>
							</rich:column>
						</rich:dataTable>
					</rich:panel>
	
					<rich:datascroller for="bandsTable" align="center"
						selectedStyleClass="border-color-green color-green"
						styleClass="top-margin" tableStyleClass="border-color-green no-bg" />
				</a:outputPanel>
				<div class="clear-it"></div>
				
				<a:outputPanel rendered="#{componentesAction.verComponentes}" id="membersPanel">
					<h:outputText value="#{messages['members.table.title']} #{componentesAction.grupo.nombre}"
						styleClass="title color-blue" />
					<rich:panel styleClass="panel border-color-blue">
						<rich:dataTable columnClasses="data-table-cell" id="membersTable"
							value="#{componentesAction.grupo.componentes}" styleClass="data-table"
							var="item" rows="7">
							<rich:column filterBy="#{item.usuario.nombre} #{item.usuario.primerApellido} #{item.usuario.segundoApellido}">
								<f:facet name="header">
									<h:outputText value="#{messages['members.table.name']}" />
								</f:facet>
								<h:outputText value="#{item.usuario.nombre} #{item.usuario.primerApellido} #{item.usuario.segundoApellido}" />
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="#{messages['members.table.registration.date']}" />
								</f:facet>
								<rich:calendar value="#{item.alta}" datePattern="dd/MM/yyyy" inputSize="12" />
							</rich:column>
							<rich:column rendered="#{usuario.perfil.administrador or usuario.perfil.componentesEliminar}">
								<f:facet name="header">
									<h:outputText value="#{messages['members.table.leaving.date']}" />
								</f:facet>
								<rich:calendar value="#{item.baja}" datePattern="dd/MM/yyyy" inputSize="12" />
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="#{messages['members.table.instrument']}" />
								</f:facet>
								<h:inputText value="#{item.actividad}" />
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="#{messages['members.table.representative']}" />
								</f:facet>
								<h:selectBooleanCheckbox value="#{item.representante}">
									<a:support action="#{componentesAction.checkRepresentante(item)}" event="onclick" reRender="membersPanel" />
								</h:selectBooleanCheckbox>
							</rich:column>
						</rich:dataTable>
					</rich:panel>
					
					<rich:datascroller for="membersTable" align="center"
						selectedStyleClass="border-color-blue color-blue"
						styleClass="top-margin" tableStyleClass="border-color-blue no-bg" />
				</a:outputPanel>
				<a:outputPanel rendered="#{componentesAction.asignarComponentes}" id="usersPanel">
					<h:outputText value="#{messages['members.users.table.title']} #{componentesAction.grupo.nombre}"
						styleClass="title color-orange" />
					<rich:panel styleClass="panel border-color-orange">
						<rich:dataTable columnClasses="data-table-cell" id="usersTable"
							value="#{componentesAction.componentes}" styleClass="data-table"
							var="item" rows="7">
							<rich:column filterBy="#{item.usuario.nombre} #{item.usuario.primerApellido} #{item.usuario.segundoApellido}">
								<f:facet name="header">
									<h:outputText value="#{messages['members.users.table.name']}" />
								</f:facet>
								<h:outputText value="#{item.usuario.nombre} #{item.usuario.primerApellido} #{item.usuario.segundoApellido}" />
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="#{messages['members.users.table.registration.date']}" />
								</f:facet>
								<rich:calendar value="#{item.alta}" datePattern="dd/MM/yyyy" inputSize="12" />
							</rich:column>
							<rich:column rendered="#{usuario.perfil.administrador or usuario.perfil.componentesEliminar}">
								<f:facet name="header">
									<h:outputText value="#{messages['members.users.table.leaving.date']}" />
								</f:facet>
								<rich:calendar value="#{item.baja}" datePattern="dd/MM/yyyy" inputSize="12" />
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="#{messages['members.users.table.instrument']}" />
								</f:facet>
								<h:inputText value="#{item.actividad}" />
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="#{messages['members.users.table.representative']}" />
								</f:facet>
								<h:selectBooleanCheckbox value="#{item.representante}">
									<a:support action="#{componentesAction.checkRepresentante(item)}" event="onclick" reRender="usersPanel" />
								</h:selectBooleanCheckbox>
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="#{messages['members.users.table.actions']}" />
								</f:facet>
								<h:selectBooleanCheckbox value="#{componentesAction.selected[item]}">
									<a:support action="#{componentesAction.checkMember(item)}" event="onchange" reRender="usersPanel" />
								</h:selectBooleanCheckbox>
							</rich:column>
						</rich:dataTable>
					</rich:panel>
					
					<rich:datascroller for="usersTable" align="center"
						selectedStyleClass="border-color-orange color-orange"
						styleClass="top-margin" tableStyleClass="border-color-orange no-bg" />
				</a:outputPanel>
	
				<div class="clear-it"></div>
			</s:decorate>
			
			<s:decorate template="/layout/buttonbar.xhtml">
				<a:commandButton value="#{messages['members.actions.save.changes']}" actionListener="#{componentesAction.guardar()}" styleClass="btn btn-green" reRender="base"
					rendered="#{(usuario.perfil.administrador or usuario.perfil.componentesModificar or usuario.perfil.componentesCrear) and (componentesAction.verComponentes or componentesAction.asignarComponentes)}" />
				<h:commandButton value="#{messages['members.actions.list']}" styleClass="btn btn-pink tiny-font" action="#{componentesReport.listado()}"
					rendered="#{not componentesAction.verComponentes and not componentesAction.asignarComponentes}">
					<f:setPropertyActionListener target="#{componentesReport.grupos}" value="#{componentesAction.grupos}" />
				</h:commandButton>
				<a:commandButton value="#{messages['members.actions.cancel']}" styleClass="btn btn-orange" reRender="base"
					rendered="#{componentesAction.verComponentes or componentesAction.asignarComponentes}" actionListener="#{componentesAction.load()}" />
				<h:commandButton value="#{messages['members.actions.back']}"
					action="/menu.htm" styleClass="btn btn-blue" />
			</s:decorate>
		</h:form>
	</ui:define>
	
</ui:composition>
